// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');

/* -------------------------------------------------------------------------- */
// Common elements

main {
    padding: $spacing-lg 0;

    @media #{$mq-md} {
        padding: $spacing-2xl 0;
    }
}

/* -------------------------------------------------------------------------- */
// Main heading

header {
    h1 {
        margin-bottom: $spacing-sm;
    }

    .tagline {
        font-weight: bold;
        margin-bottom: $layout-lg;
    }
}

/* -------------------------------------------------------------------------- */
// Email recovery form

.mzp-c-form {
    margin-bottom: $layout-lg;
}

.mzp-c-field,
.mzp-c-form-errors {
    @include border-box;
    max-width: $content-xs;
}

.mzp-c-button-container {
    max-width: $content-xs;
}

/* -------------------------------------------------------------------------- */
// Other ways to stay in touch

aside {
    h2 {
        @include text-title-sm;
        margin-bottom: 40px;
    }

    .social-links {
        margin: 2em 0 0;

        li {
            display: inline-block;
            margin-right: 20px;

            a {
                display: block;
                @include image-replaced;
                background-repeat: no-repeat;
                background-size: 27px auto;
                width: 28px;
                height: 28px;

                &.bluesky {
                    background-image: url('/media/img/icons/social/bluesky/black.svg');
                }

                &.instagram {
                    background-image: url('#{$image-path}/icons/social/instagram/black.svg');
                }

                &.youtube {
                    background-image: url('#{$image-path}/icons/social/youtube/black.svg');
                }

                &.facebook {
                    background-image: url('#{$image-path}/icons/social/facebook/black.svg');
                }
            }
        }
    }
}
